<template>
  <a-card :bordered="false">
    <div style="margin-bottom:10px">
      <a-button icon="plus" type="primary" @click="handleAddFirst(0,'')">新增分类</a-button>
    </div>
    <div>
      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="false"
      >
        <template slot="action" slot-scope="text,record,index">
          <a-button
            type="primary"
            icon="form"
            style="margin-right:5px"
            @click="handleAddFirst(2,record)"
          >编辑</a-button>
          <a-button
            v-if="record.type==1"
            type="primary"
            icon="plus"
            style="margin-right:5px"
            @click="handleAddFirst(1,record)"
          >新增下级分类</a-button>
          <a-popconfirm
            placement="top"
            :title="confirm_title"
            @confirm="confirm(record)"
            okText="Yes"
            cancelText="No"
          >
            <a-button type="danger" icon="delete">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
      <a-pagination
        style="margin-top:10px"
        :defaultCurrent="1"
        :current="page"
        :defaultPageSize="1"
        :total="total"
        @change="handleTableChange"
      ></a-pagination>
    </div>
    <a-modal
      :title="modal_title"
      :visible="modal_visible"
      :confirmLoading="loading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form layout="inline" :form="form">
        <a-form-item label="ID" style="display:none">
          <a-input v-decorator="['id']" style="display:none" :disabled="true"></a-input>
        </a-form-item>
        <a-form-item label="分类名称" v-if="modal_title=='新增分类'||modal_title=='编辑分类'">
          <a-input
            placeholder="分类名称"
            v-decorator="['name',{rules:[{required:true,message:'分类名称'}]}]"
          ></a-input>
        </a-form-item>
        <a-form-item label="上级分类名称" v-if="modal_title=='新增下级分类'||modal_title=='编辑下级分类'">
          <a-input placeholder="上级分类名称" v-decorator="['pid_name']" :disabled="true" />
        </a-form-item>
        <a-form-item label="下级分类名称" v-if="modal_title=='新增下级分类'||modal_title=='编辑下级分类'">
          <a-input
            placeholder="下级分类名称"
            v-decorator="['cid_name',{rules:[{required:true,message:'下级分类名称'}]}]"
          ></a-input>
        </a-form-item>
        <a-form-item label="分类排序">
          <a-input
            placeholder="分类排序"
            v-decorator="['sort',{rules:[{required:true,message:'分类排序'}]}]"
          ></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import { postAction } from '@/api/manage'

export default {
  data() {
    return {
      pid_arr: [],
      page: 1,
      size: 10,
      total: 0,
      columns: [
        { title: '分类ID', align: 'center', dataIndex: 'id' },
        { title: '分类名称', align: 'center', dataIndex: 'name', width: 200 },
        { title: '分类级别', align: 'center', dataIndex: 'type' },
        { title: '排序', align: 'center', dataIndex: 'sort' },
        { title: '操作', align: 'center', scopedSlots: { customRender: 'action' } }
      ],
      dataSource: [],
      loading: false,
      modal_title: '',
      modal_visible: false,
      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
      confirm_title: '确定要删除此类型?'
    }
  },
  components: {},
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      postAction('/sort/pid', {
        page: this.page,
        size: this.size,
        pid: this.pid_arr.length > 0 ? this.pid_arr[this.page - 1].id : ''
      }).then(res => {
        this.loading = false
        this.pid_arr = res.pid
        this.total = this.pid_arr.length
        this.dataSource = res.cid
      })
    },
    handleTableChange(page, pageSize) {
      this.page = page
      this.getData()
    },
    handleAddFirst(index, item) {
      if (index == 0) {
        this.form.resetFields()
        this.modal_title = '新增分类'
      } else if (index == 1) {
        if (item) {
          this.modal_title = '新增下级分类'
          this.$nextTick(() => {
            this.form.setFieldsValue({
              id: item.id,
              pid_name: item.name
            })
          })
        }
      } else if ((index = 2)) {
        if (item.type == 1) {
          this.modal_title = '编辑分类'
          this.$nextTick(() => {
            this.form.setFieldsValue({
              id: item.id,
              name: item.name,
              sort: item.sort
            })
          })
        } else {
          this.modal_title = '编辑下级分类'
          this.$nextTick(() => {
            this.form.setFieldsValue({
              id: item.id,
              pid_name: this.pid_arr[this.page - 1].name,
              cid_name: item.name,
              sort: item.sort
            })
          })
        }
      }
      this.modal_visible = true
    },
    handleOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          let url = ''
          if (this.modal_title == '新增分类') {
            url = '/sort/addpid'
          } else if (this.modal_title == '新增下级分类') {
            url = '/sort/addcid'
          } else if (this.modal_title == '编辑分类') {
            url = '/sort/updatep'
          } else if (this.modal_title == '编辑下级分类') {
            url = '/sort/updatec'
          }
          postAction(url, this.form.getFieldsValue()).then(res => {
            this.loading = false
            this.modal_visible = false
            this.form.resetFields()
            this.getData()
          })
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.modal_visible = false
    },
    confirm(item) {
      // console.log(item)
      let url = ''
      if (item.type == 1) {
        url = '/sort/deletep'
      } else {
        url = '/sort/deletec'
      }
      this.loading = true
      postAction(url, {
        id: item.id
      }).then(res => {
        this.loading = false
        if (item.type == 1) {
          if (this.page == 1) {
            this.page == 1
          } else {
            this.page--
          }
        }
        this.getData()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>